<template>
	<a-card class="service_item" hoverable>
		<template #title>
			<span></span>
			<icon-xigua-color :size="48" />
			<dl>
				<dt>{{ itemData.title }}</dt>
				<dd>{{ itemData.depart }}</dd>
			</dl>
		</template>
		<template #extra>
			<a-button :status="itemData.isCollect ? 'waring' : ''" type="text" @click="handleCollect">
				<icon-heart-fill :size="18" />
			</a-button>
		</template>
		<a-link :hoverable="false" @click="handleLookDetail">
			<template #icon>
				<icon-eye :size="18" />
			</template>
			服务详情
		</a-link>
		<a-divider direction="vertical" />
		<a-link :hoverable="false" @click="handleToTransact">
			<template #icon>
				<icon-edit :size="16" />
			</template>
			在线办理
		</a-link>
	</a-card>
</template>

<script setup lang="ts">
interface Props {
	id: number;
	title: string;
	depart: string;
	isCommon: boolean;
	isCollect: boolean;
}

const emit = defineEmits<{ (e: 'look', id: number): void }>();

const props = defineProps({ data: { type: Object as PropType<Props>, default: () => {} } });

const itemData = ref<Props>(props.data);

const handleCollect = () => {
	itemData.value.isCollect = !itemData.value.isCollect;
};

const handleLookDetail = () => {
	emit('look', itemData.value.id);
};

const handleToTransact = () => {
	console.log('');
};
</script>

<style lang="scss" scoped>
.arco-card.service_item {
	cursor: pointer;
	border-radius: 4px;
	transition-property: all;
	border: solid 1px var(--color-neutral-3);
	&:hover {
		transform: translateY(-2px);
		border-color: rgb(var(--primary-6));
	}
	:deep(.arco-card-header) {
		height: auto;
		padding: 16px;
		position: relative;
		.arco-card-header-extra {
			position: absolute;
			top: 6px;
			right: 6px;
			line-height: 1;
		}
		.arco-btn {
			height: auto;
			padding: 0;
			color: #d6d6d6;
			&.arco-btn-status-waring {
				color: rgb(var(--warning-6));
			}
		}
	}
	:deep(.arco-card-header-title) {
		display: flex;
		align-items: center;
		svg.arco-icon {
			flex-shrink: 0;
			margin-right: 10px;
		}
		dl {
			flex: 1;
			line-height: 1;
			font-size: 15px;
			overflow: hidden;
		}
		dt {
			overflow: hidden;
			margin-bottom: 10px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		dd {
			color: #909399;
		}
	}
	:deep(.arco-card-body) {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 12px;
	}
	a.arco-link {
		display: flex;
		line-height: 1;
		align-items: center;
		color: #909399;
		&:hover {
			color: rgb(var(--primary-6));
		}
	}
}
</style>
